import React, { Component } from 'react'
import classNames from 'classnames'

export default class Tabs extends Component {
  render() {
    const { tabs, active, changeActive } = this.props
    return (
      <div className='tabs-order'>
        <ul className='sort-container'>
          {/* 只有 active 等于 tab.name 的时候才选中 */}
          {/* 点击高亮：点击的时候，把父亲的 active 变成点击的那一项的 type */}
          {/* //!#2 子组件调用传递过来方法的同时并传递参数 */}
          {tabs.map((tab) => (
            <li
              className={classNames({
                on: tab.type === active,
              })}
              key={tab.id}
              onClick={() => changeActive(tab.type)}
            >
              按{tab.name}排序
            </li>
          ))}
        </ul>
      </div>
    )
  }
}
